<script setup lang="ts">
import { computed, ref } from 'vue'
import { highLightCode } from '@/utils/highLightCode'
const { javaCode, javaScriptCode, phpCode } = highLightCode()

const code = computed(() => {
  if (radioType.value === '1') {
    return javaCode()
  } else if (radioType.value === '2') {
    return javaScriptCode()
  } else if (radioType.value === '3') {
    return phpCode()
  }
  return ``
})
const radioType = ref<string>('1')
</script>

<template>
  <t-row class="container">
    <t-col :xs="12" :sm="12" :md="12" :lg="7" :xl="7" :xxl="7" class="left-container">
      <div>
        <h2>多种语言应用接入代码示例</h2>
        <p>
          支持Java、JavaScript、PHP等语言开发的网站或小程序应用接入授权系统，核心原理上是将授权检测代码内嵌到应用入口文件或核心文件中，通过以加密或编译打包的形式确保安全性，后向授权服务器发送POST请求，请求主体的数据是
          JSON
          格式，请求体携带参数为：domain（域名），ip（IP），appId（应用ID），由授权服务器根据请求参数进行处理，返回授权结果，若授权认证未通过，则目标应用会重定向至授权认证错误页面，
          当且仅当授权认证通过时，目标应用正常运行。
        </p>
      </div>
    </t-col>
    <t-col :xs="12" :sm="12" :md="12" :lg="5" :xl="5" :xxl="5" class="right-container">
      <t-space direction="vertical" style="width: 100%">
        <t-radio-group variant="default-filled" v-model="radioType">
          <t-radio-button value="1">Java</t-radio-button>
          <t-radio-button value="2">JavaScript</t-radio-button>
          <t-radio-button value="3">PHP</t-radio-button>
        </t-radio-group>
        <highlightjs :code="code" class="code-container" />
      </t-space>
    </t-col>
  </t-row>
</template>

<style scoped lang="sass">
.container
  width: 100%
  padding: 20px
  background-image: url('@/assets/images/author/white-bg-circle.png')
  background-size: cover
  .right-container
    height: 320px
  .left-container
    height: 320px
    display: grid
    place-items: center
    div
      margin: 0 20px
.code-container
  width: 100%
  height: 250px
  overflow: auto
  &::-webkit-scrollbar
    display: none
</style>
